트렐로 작업을 하며 느낀 점

고민, 구상

시작하면 가운데 보드가 있고 보드가 없을 경우에 no boards 표현

데이터를 어떻게 가져갈 것인가?

+를 누르면 new board 생성// 보드를 클릭하는 순간 기존의 메인 보드 객체에선 벗어나서

세부 객체로 들어감

세부 객체 데이타가 없을 경우에 왼쪽에 + 버튼(버튼으로 구현?)

버튼 클릭시 첫 리스트 객체 생성 엑스 누르면 삭제 가능

List 에서 + 누를때마다 Item textarea

텍스트 에어리어 마우스 아웃 되거나 다른 부위를 클릭했을 경우에만 입력 됨

삭제 기능 구현

보드를 클릭하면 이름 바꿀 수 있다

개선할 점

• 함수, 변수 이름 명명의 중요성, 처음부터 제대로 해놓지 않으면 헷갈린다. 나중에 고치면 되겠지란 생각으로 명명을 그냥 지나치지 말고, camelCase 적용시켜서 이름을 지을 것.
• 데이타 저장방법과 데이터 불러오는 방법에 대해 미리 생각해볼 것.
• 구현 과정에 맞춰서 불필요한 주석 제 때 삭제해줄 것. 당일 작업 마칠 때 정리해주는 습관.
• 코드 작성 전, 데이터를 언제 만들고 불러올지 밑그림을 그려봤어야 한다.
• 데이터를 어떻게 관리할 것인가? 배열 인덱스를 언제 생성해줄 것인가?
• 함수를 쪼개는 것이 절실. 함수가 단 한 가지 역할만 수행해야 오류가 적고, 재사용이 쉬워진다.

트렐로 원본 분석

트렐로에서 데이터는 전체 배열 하나에 들어가고, 각 데이터는 하나의 객체로 구분되는데, 이 객체에는 id, title,lists 가 있다. ex) [{id, title, lists}]

id는 랜덤으로 생성하고, title은 제목, lists는 또 다시 배열.

처음에는 보드를 데이터를 다 배열로 구성해서 힘들었다. 보드 또한 오브젝트로 할 것.

트렐로 원본의 장점 : 함수명이 무척 직관적이고 무슨 일을 하는지 알 수 있다

getBoards

getList

getListBoard

같은 일을 하는 함수끼리 묶여있다

다음 목표

• 데이터 구조 개선하고, 배치를 다시 새롭게 하고 함수를 그나마 쪼갤 것.

• 프로토 타입 기능은 써먹지 못한다. 아직 그럴 능력이 안 됨.

• 정도님 이야기

//getelements는 array로 가져오니까 [0]으로 설정해줘야 할 것

//onclick은 하나의 이벤트만 붙음

//복수 이벤트의 붙이려면 attachment라던가

float -> css left 지정, 자주 쓰기 때문에 배워둘 가치가 있다

Span input 보여주기 숨기기



nextelementsibling

this.style.display = 'none'

header.InputField.focus();

card.queryselector  // 범위를 좁혀주는 식으로 셀렉터 지정.

this.blur(); //포커스 아웃

card.remove() -> none은 아님


insertAdjacentHTML 유용 꼭 배워둘 것

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

https://wonism.github.io/innerhtml-insertadjacenthtml/ innerHTML과 insertAdjacentHTML의 차이

• 다음에는 영어 타자연습 프로그램을 제작해볼까?

  생각 : 카운터로 쓰고, 배열에서 문장 불러오고, 버튼이나 엔터 눌러서 입력하고, 일치 여부 검사해서 점수 매기고.